<!-- 大屏展示 -->

<template>
    <div id="app">
        <!-- 网格 背景 -->
        <!--<div class="bg"></div>-->

        <!-- 背景 -->
        <!--<div class="bg-2"></div>-->


        <div class="menu-box">
            <div class="item" v-for="(item, ind) in menu.arr" :key="ind"
                 :class="ind === menu.ind ? 'on' : ''"
                 @click="checkMenu(ind)">{{ item }}</div>
        </div>

        <!-- 标题 start -->
        <div class="title-box" v-show="menu.ind === 0">
            <div class="main">北京市朝阳区人工智能产业集群知识产权分布</div>
            <div class="vice">Intellectual property distribution of artificial intelligence industrial cluster in Chaoyang District of Beijing</div>
        </div>
        <!-- 标题 end -->



        <!-- 主内容 start -->
        <div class="content-box" v-if="menu.ind === 0">

            <!-- 中国地图 背景 -->
            <div class="cha"></div>

            <!-- 1. 专利总数 start -->
            <div class="patent-total">
                <div class="common-content flex-row space-between">
                    <div class="title">专利总数：</div>

                    <!-- led 数字 -->
                    <div class="num" v-for="(item, ind) in (patentTotal).toString()" :key="ind">
                        <img :src="require('@/assets/led-num/' + item + '.svg')" />
                    </div>

                    <div class="unit">件</div>
                </div>
            </div>
            <!-- 1. 专利总数 end -->

            <!-- 2. 朝阳区地图 start -->
            <div class="districts-box">
                <div class="common-content">
                    <div class="address" v-for="(item, ind) in patentData.apply" :key="ind"
                         :style="{ top: item.top + '%', left: item.left + '%', 'animation-duration': (Math.floor(Math.random() * 3) + 2) + 's' }">
                        <div class="common-content">
                            <img :src="require('@/assets/guangzhu.png')" />
                            <div class="name">{{ item.value }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 2. 朝阳区地图 start -->

            <!-- 3. 右 start -->
            <div class="right-box">
                <div class="common-content flex-column">
                    <!-- 3.1 专利分类 start -->
                    <div class="patent-types flex-row space-between">
                        <div class="item" v-for="(item, ind) in patentData.patentTypes" :key="ind">
                            <div class="num"><countTo :startVal='0' :endVal='item.num' :duration='10000'></countTo></div>
                            <div class="type">{{ item.value }}</div>
                        </div>
                    </div>
                    <!-- 3.1 专利分类 end -->

                    <!-- 3.2 全国城市/区县排名 start -->
                    <div class="city-box flex-row space-between">
                        <div v-for="(item, ind) in [{ val: 'city', title: '全国主要城市分布' }, { val: 'districts', title: '北京市主要区县分布' }]"
                             :key="ind" class="item flex-column">
                            <div class="title">{{ item.title }}</div>
                            <div class="data" :id="item.val"></div>
                        </div>
                    </div>
                    <!-- 3.2 全国城市/区县排名 end -->

                    <!-- 3.3 申请人/发明人排名 start -->
                    <div class="inventions-box flex-row space-between">
                        <div v-for="(item, ind) in [{ val: 'apply', title: '申请人排行' }, { val: 'inventions', title: '发明（设计）人排行' }]"
                            :key="ind" class="item flex-column">
                            <div class="title">{{ item.title }}</div>

                            <div class="data">
                                <div class="rank-box flex-row" v-for="(cItem, cInd) in patentData[item.val]" :key="cInd">
                                    <div class="ind rank-1" v-if="cInd === 0"></div>
                                    <div class="ind rank-2" v-else-if="cInd === 1"></div>
                                    <div class="ind rank-3" v-else-if="cInd === 2"></div>
                                    <div class="ind" v-else>{{ cInd + 1 }}</div>

                                    <div class="name">{{ cItem.value }}</div>
                                    <div class="num">{{ cItem.num }}</div>

                                    <!-- 进度条比例 -->
                                    <div class="rank-line">
                                        <div class="percentage" v-if="cInd < 3"
                                             :style="{ width: getPercentage(cItem.num, item.val) + '%' }"></div>

                                        <div class="percentage-other" v-if="cInd >= 3"
                                             :style="{ width: getPercentage(cItem.num, item.val) + '%' }"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 3.3 申请人/发明人排名 end -->

                </div>
            </div>
            <!-- 3. 右 start -->

            <!-- 4. 趋势 start -->
            <div class="trend-box">
                <div class="common-content item flex-column">
                    <div class="title">专利申请趋势</div>
                    <div class="data" id="trend" style="overflow: hidden;"></div>
                </div>
            </div>
            <!-- 4. 趋势 end -->

            <!-- 5. 人工智能产业链 start -->
            <div class="ai-box">
                <div class="common-content" id="ai"></div>
                <div class="scanning-rotate-1"></div>
                <div class="scanning-rotate-2"></div>
                <div class="scanning-rotate-3"></div>
            </div>
            <!-- 5. 人工智能产业链 end -->

        </div>
        <!-- 主内容 end -->

        <!-- 发展历程 start -->
        <div class="content-box history" v-if="menu.ind === 1"></div>
        <!-- 发展历程 end -->

        <!-- 全景图 start -->
        <div class="content-box panorama" v-if="menu.ind === 2">
            <div class="title">人工智能产业链全景图</div>
            <img :src="require('@/assets/panorama.png')" />
        </div>
        <!-- 全景图 end -->
    </div>
</template>



<script>

    /* dataType 类型配置，模拟后台接口数据 */
    import Datas from './jsonData/datas.js';

    /* 通用服务方法 */
    import { getRoseDiagram, getLine, getRadar } from './services/charts.services.js';

    /* 数字滚动 */
    import countTo from 'vue-count-to';



    export default {
        name: 'App',
        components: { countTo },

        data() {
            return {

                /* 导航菜单 */
                menu: {
                    arr: ['首页', '发展历程', '全景图'],
                    ind: 0,
                },

                patentData: {},
                chartView: {},

                applyCount: 0,
                inventionsCount: 0,

                patentTotal: 0,
                Timer: null,
            }
        },

        created() {
            this.patentData = Datas;
            this.countTo();

            this.$nextTick(() => { this.initCharts(); });
        },

        mounted() {
            this.$nextTick(() => {
                // 监听 window 窗口变化，自适应图表
                window.addEventListener("resize", this.resizeChart);
            });
        },

        methods: {

            /* 切换菜单 */
            checkMenu(ind) {
                this.menu.ind = ind;

                if (ind === 0) {
                    setTimeout(() => { this.initCharts(); }, 10)
                }
            },

            /* 计数 */
            countTo() {
                if (this.Timer) { clearInterval(this.Timer); }
                this.patentTotal = 0;

                let patentTotal = this.patentData.patentTotal;
                let num = parseInt(patentTotal/150);

                this.Timer = setInterval(() => {
                    this.patentTotal = this.patentTotal + num;
                    if (this.patentTotal >= patentTotal) {
                        this.patentTotal = patentTotal;
                        clearInterval(this.Timer);
                    }
                }, 50);
            },

            /* 初始化图表数据 */
            initCharts() {
                let ids = ['city', 'districts'];
                for (let i = 0; i < ids.length; i++) {
                    let k = ids[i];
                    this.initRoseDiagram(k, this.patentData[k]);
                }

                this.initTrend();
                this.initRadar();
                this.initCount();

                this.countTo();
            },

            /* 初始化玫瑰图 */
            initRoseDiagram(id, opt) {
                let dom = document.getElementById(id);
                let tem = getRoseDiagram(opt);

                this.chartView[id] = this.$echarts.init(dom);

                this.chartView[id].clear();
                this.chartView[id].setOption(tem);

                // 循环图表
                tools.loopShowTooltip(this.chartView[id], tem, { interval: 2 * 1000, loopSeries: true });
            },

            /* 初始化趋势图 */
            initTrend() {
                let dom = document.getElementById('trend');
                let tem = getLine(this.patentData.trends);

                this.chartView['trend'] = this.$echarts.init(dom);

                this.chartView['trend'].clear();
                this.chartView['trend'].setOption(tem);

                // 循环图表
                tools.loopShowTooltip(this.chartView['trend'], tem, { interval: 2 * 1000, loopSeries: true });
            },

            /* 初始化雷达图 */
            initRadar() {
                let industrialChain = this.patentData.industrialChain;
                let arr = [];

                for (let i = 0; i < industrialChain.length; i++) {
                    let item = industrialChain[i];
                    let _arr = [];

                    for (let j = 0; j < item.children.length; j++) {
                        let cItem = item.children[j];

                        if (cItem.children) {
                            _arr = _arr.concat(cItem.children);
                        } else {
                            _arr = _arr.concat(cItem);
                        }
                    }

                    arr.push(_arr);
                }

                let dom = document.getElementById('ai');
                let tem = getRadar(arr);

                this.chartView['ai'] = this.$echarts.init(dom);
                this.chartView['ai'].clear();
                this.chartView['ai'].setOption(tem);
            },

            /* 图标自适应 */
            resizeChart() {
                for (let k in this.chartView) {
                    this.chartView[k].resize();
                }
            },

            /* 计算合计数 */
            initCount() {
                let apply = this.patentData.apply;
                let inventions = this.patentData.inventions;

                /*function sum(arr) {
                    let n = 0;
                    for (let i = 0; i < arr.length; i++) {
                        let item = arr[i];
                        n += item.num;
                    }
                    return n;
                }*/

                this.applyCount = apply[0].num;
                this.inventionsCount = inventions[0].num;
            },

            // 计算数组所占百分比
            getPercentage(num, k) {
                let map = {
                    apply: 'applyCount',
                    inventions: 'inventionsCount',
                };
                return Math.floor((num / this[map[k]]) * 100);
            },



        },
    }
</script>



<style lang="scss">
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-size: 20px;
    }

    html, body {
        width: 3040px;
        height: 1520px;
        position: relative;
        background-color: #0b0b0f;

        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #67faff;
    }

    /* 滚动条样式设置 */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar:hover { width: 12px; height: 12px; }
    ::-webkit-scrollbar-track:vertical { background-color: rgba(0, 0, 0, 0.3); }
    ::-webkit-scrollbar-thumb { background-color: rgba(103, 250, 255, 0.5); border-radius: 8px; }

    /* 背景 */
    #app {
        .bg, .bg-2, .cha {
            width: 100%;
            height: 100%;
            position: absolute;
        }

        /* 网格背景 */
        .bg {
            background: url("./assets/bg-grid.svg");
            background-size: 50px;
            opacity: 0.05;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        .bg-2 {
            background: url("./assets/bg.jpg") no-repeat 0 0;
            background-size: 100% 100%;
            opacity: 0.4;
        }

        /* 中国地图背景 */
        .cha {
            background: url("./assets/China.png") no-repeat 30% 22%;
            background-size: 90%;
            opacity: 0.1;
            z-index: 1;
        }
    }

    /* 菜单 */
    .menu-box {
        position: absolute;
        z-index: 1001;
        top: 30px;
        left: 60px;

        .item {
            font-size: 30px;
            line-height: 50px;
            float: left;
            text-align: center;
            margin-right: 60px;
            padding-left: 60px;
            opacity: 0.4;
            cursor: pointer;

            &:hover {
                opacity: 0.8;
            }

            &:nth-child(1) {
                background: url("./assets/menu-charts.svg") no-repeat 10px center;
                background-size: 30px;
            }

            &:nth-child(2) {
                background: url("./assets/menu-history.svg") no-repeat 10px center;
                background-size: 30px;
            }

            &:nth-child(3) {
                background: url("./assets/menu-panorama.svg") no-repeat 10px center;
                background-size: 30px;
            }
        }

        .on, .on:hover {
            color: #67faff;
            cursor: default;
            opacity: 1;
        }
    }

    /* 发展历程 */
    .history {
        background: url("./assets/bg-history.jpg") no-repeat center;
        background-size: 100% auto;
    }

    /* 全景图 */
    .panorama {
        text-align: center;
        background: url("./assets/bg-panorama.jpg") no-repeat center;
        background-size: 100%;
        padding: 50px;

        .title {
            color: #ffffff;
            font-size: 90px;
            font-weight: bold;
        }

        img {
            width: 100%;
            margin: 0 auto;
        }
    }

    .common-content {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .flex-column {
        display: flex;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        flex-direction: row;
    }

    .space-between {
        justify-content: space-between;
    }

    #app {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;

        /* 头部 */
        .title-box {
            height: 70px;
            text-align: center;
            z-index: 1000;
            color: #ffffff;
            background: url("./assets/bg-head-title.png") no-repeat center 22px;
            background-size: auto 73%;

            .main {
                font-size: 34px;
                font-weight: bold;
                letter-spacing: 6px;
            }

            .vice {
                font-size: 16px;
                opacity: 0.8;
                letter-spacing: 0.7px;
            }
        }

        /* 内容 */
        .content-box {
            flex: 1;
            position: relative;
            z-index: 100;

            .city-box,
            .inventions-box,
            .trend-box {
                .item {
                    /* 内阴影 */
                    /*box-shadow: 0 0 20px #276479 inset;*/

                    .title, .data {
                        position: relative;
                    }

                    .title {
                        height: 50px;
                        line-height: 30px;
                        position: relative;
                        padding: 0 20px;
                        font-size: 22px;
                        background: url("./assets/line.svg") no-repeat 0 -1px;
                        background-size: auto 30px;
                    }

                    .data {
                        flex: 1;
                        overflow-y: auto;
                    }
                }
            }

            /* 专利总数 */
            .patent-total {
                padding: 10px;
                position: absolute;
                z-index: 100;
                left: 50%;
                transform: translate(-50%, 20px);

                .num img { width: 60px; }

                .title, .unit {
                    color: #ffe128;
                    display: flex;
                    align-items: flex-end;
                    font-size: 30px;
                }

                .num {
                    border: 1px solid #67faff;
                    margin-right: 10px;
                    background: rgba(0, 209, 238, 0.2);
                    backdrop-filter: blur(1px);
                }
            }

            /* 朝阳区 */
            .districts-box {
                width: 800px;
                height: 800px;
                background: url("./assets/beijing-chaoyang.png") no-repeat;
                background-size: auto 100%;
                position: absolute;
                z-index: 50;
                left: 50%;
                transform: translate(-50%, 180px);

                @keyframes light {
                    from {
                        opacity: 0.45; }
                    to {
                        opacity: 0.9;
                    }
                }

                .address {
                    width: 180px;
                    text-align: center;
                    position: absolute;

                    animation-name: light;
                    animation-duration: 2s;
                    animation-timing-function: ease-out;
                    animation-iteration-count: infinite;
                    animation-direction: alternate-reverse;

                    img {
                        width: 100%;
                        opacity: 0.9;
                    }

                    .name {
                        width: 100%;
                        position: absolute;
                        bottom: 4px;
                        color: #10316b;
                        font-size: 20px;
                        font-weight: bold;
                    }
                }
            }

            .item {
                height: 100%;
                border-radius: 10px;
                padding: 20px;
                position: relative;

                /* 毛玻璃效果 缺点是兼容性 */
                backdrop-filter: blur(4px);
            }

            .right-box {
                width: 1000px;
                height: 100%;
                padding: 20px;
                right: 0;
                position: absolute;
                z-index: 100;
            }

            /* 专利类型 */
            .patent-types {
                padding-bottom: 15px;

                .item {
                    width: 23.5%;
                    text-align: center;

                    .num {
                        font-size: 40px;
                        font-weight: bold;

                        span { font-size: 40px; }
                    }

                    .type { font-size: 16px; }
                }

                .item:nth-child(1) {
                    color: #50E237;
                    background: rgba(80, 226, 55, 0.1);
                    box-shadow: 0 0 15px #4a6b45 inset;
                }
                .item:nth-child(2) {
                    color: #e825ff;
                    background: rgba(232, 37, 255, 0.1);
                    box-shadow: 0 0 15px #88568e inset;
                }
                .item:nth-child(3) {
                    color: #4abcff;
                    background: rgba(74, 188, 255, 0.13);
                    box-shadow: 0 0 15px #5c7788 inset;
                }
                .item:nth-child(4) {
                    color: #ffe128;
                    background: rgba(255, 225, 40, 0.13);
                    box-shadow: 0 0 15px #797245 inset;
                }
            }

            /* 城市 */
            .city-box {
                height: 490px;
                padding-bottom: 20px;

                .item {
                    background: url("./assets/bg-chart.png") no-repeat 0 0;
                    background-size: auto 100%;
                }
            }

            .inventions-box {
                flex: 1;
                min-height: 300px;

                .item {
                    background: url("./assets/bg-space.png") no-repeat 0 0;
                    background-size: auto 100%;
                }

                .rank-box {
                    padding: 0 10px;
                    line-height: 60px;
                    margin-bottom: 10px;
                    border-radius: 10px;
                    position: relative;

                    .rank-line {
                        width: 90%;
                        height: 2px;
                        border-radius: 2px;
                        background: rgba(0, 0, 0, 0.7);
                        position: absolute;
                        bottom: 0;
                        right: 8px;
                        overflow: hidden;

                        .percentage, .percentage-other {
                            width: 100%;
                            height: 100%;
                            border-radius: 2px;
                            position: absolute;
                            top: 0;
                            left: 0;
                        }
                        .percentage {
                            background: url("./assets/percentage.png") no-repeat;
                            background-size: 100% 100%;
                        }
                        .percentage-other {
                            background: url("./assets/percentage-other.png") no-repeat;
                            background-size: 100% 100%;
                        }
                    }

                    .ind { width: 40px; text-align: center; }
                    .name { flex: 1; }
                    .num { width: 60px; text-align: right; }

                    .rank-1 {
                        background: url("./assets/ranking-num/1.svg") no-repeat center;
                        background-size: 18px;
                    }

                    .rank-2 {
                        background: url("./assets/ranking-num/2.svg") no-repeat center;
                        background-size: 18px;
                    }

                    .rank-3 {
                        background: url("./assets/ranking-num/3.svg") no-repeat center;
                        background-size: 18px;
                    }

                    /*&:hover {
                        background: rgba(103, 250, 255, 0.3);
                    }*/
                }
            }

            .city-box, .inventions-box {
                .item { width: 49%; }
            }

            /* 趋势 */
            .trend-box {
                width: 40%;
                height: 35%;
                position: absolute;
                z-index: 100;
                right: 1000px;
                bottom: 0;
                padding: 20px;

                .item {
                    background: url("./assets/bg-trend.png") no-repeat 0 0;
                    background-size: auto 100%;
                }
            }

            /* 人工智能产业链 */
            .ai-box {
                width: 100%;
                height: 100%;
                padding: 10px;
                position: absolute;

                #ai { z-index: 1; }

                #ai::after {
                    content: "";
                    background: url("./assets/ai.png") no-repeat 1% center;
                    -webkit-filter: blur(3px);
                    background-size: 42%;
                    opacity: 0.7;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    position: absolute;
                    z-index: -1;
                }

                @keyframes rotate {
                    from {
                        -webkit-transform:rotate(0deg); }
                    to {
                        -webkit-transform:rotate(-360deg);
                    }
                }

                [class*="scanning-rotate-"] {
                    opacity: 0.9;
                    position: absolute;

                    animation-name: rotate;
                    animation-timing-function: linear;
                    animation-iteration-count: infinite;
                }

                .scanning-rotate-1 {
                    width: 310px;
                    height: 310px;
                    border-radius: 200px;
                    background: url("./assets/scanning-rotate.png") no-repeat 0 0;
                    background-size: 100%;
                    top: 170px;
                    left: 429px;
                    animation-duration: 3s;
                }

                .scanning-rotate-2 {
                    width: 270px;
                    height: 270px;
                    border-radius: 200px;
                    background: url("./assets/scanning-rotate.png") no-repeat 0 0;
                    background-size: 100%;
                    top: 590px;
                    left: 147px;
                    animation-duration: 2s;
                }

                .scanning-rotate-3 {
                    width: 290px;
                    height: 290px;
                    border-radius: 200px;
                    background: url("./assets/scanning-rotate.png") no-repeat 0 0;
                    background-size: 100%;
                    top: 980px;
                    left: 379px;
                    animation-duration: 4s;
                }
            }
        }
    }

</style>
